<template>
  <div class="delay-table">
    <div class="search-box">
      <div class="search-left">
        <div class="c-item select">
          <el-select v-model="searchForm.status" size="small" clearable placeholder="申请状态" @change="searchData">
            <el-option label="待处理" value="0"></el-option>
            <el-option label="审批通过" value="1"></el-option>
            <el-option label="审批不通过" value="2"></el-option>
          </el-select>
        </div>
        <div class="c-item input">
          <el-input
            v-model="searchForm.key"
            placeholder="搜索关键词"
            maxlength="50"
            size="small"
            clearable
            @change="searchData">
            <i slot="suffix" class="el-input__icon el-icon-search" @click.stop="searchData"></i>
          </el-input>
        </div>
      </div>
    </div>
    <div class="table-box">
      <vxe-table
        align="center"
        size="medium"
        highlight-hover-row
        resizable
        border
        stripe
        :data="source"
        :header-cell-class-name="headerStyle"
        :row-class-name="rowClass"
        height="100%"
        class="table-con">
        <vxe-column field="orderNum" title="序号" width="80"></vxe-column>
        <vxe-column field="userName" title="姓名" min-width="150" #default="{ row }">
          <span>{{ row.userName || row.loginName }}</span>
        </vxe-column>
        <vxe-column field="phone" title="手机" min-width="150"></vxe-column>
        <vxe-column field="orgName" title="政府/社会组织" min-width="220"></vxe-column>
        <vxe-column field="createTime" title="申请时间" min-width="180" #default="{ row }">
          {{ row.createTime | filterDate }}
        </vxe-column>
        <vxe-column field="status" title="状态" min-width="120" #default="{ row }">
          {{ row.status | filterStatus }}
        </vxe-column>
        <vxe-column field="delayTime" title="到期时间" min-width="180" #default="{ row }">
          {{ row.delayTime | filterDate }}
        </vxe-column>
        <vxe-column title="操作" fixed="right" min-width="180" #default="{ row }">
          <template v-if="row.status === 0">
            <el-button type="text" @click.stop="delayVip(row)">延期</el-button>
            <!-- <el-button type="text" @click.stop="endVip(row)">终止使用</el-button> -->
          </template>

          <div v-else>--</div>
        </vxe-column>
      </vxe-table>
    </div>
    <slot name="pagination"></slot>
  </div>
</template>
<script>
import { formatDate } from '@utility/utility'
export default {
  name: 'DelayTable',
  emits: ['search', 'detail', 'delay', 'endVip'],
  props: {
    source: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      searchForm: {
        key: '',
        status: '',
      },
    }
  },
  filters: {
    filterDate(val) {
      if (val) {
        return formatDate(new Date(val).toLocaleString(), 'yyyy-MM-dd hh:mm')
      }
      return val
    },
    filterStatus(val) {
      if (val === 0) {
        return '待处理'
      } else if (val === 1) {
        return '审批通过'
      } else if (val === 2) {
        return '审批不通过'
      }

      return '已处理'
    },
  },
  methods: {
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    searchData() {
      this.$emit('search', this.searchForm)
    },
    detailTenant(obj) {
      this.$emit('detail', obj)
    },
    delayVip(obj) {
      this.$emit('delay', obj)
    },
    endVip(obj) {
      this.$emit('endVip', obj)
    },
  },
}
</script>
<style lang="scss" scoped>
.delay-table {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .search-box {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .search-left {
      width: 70%;
      display: flex;
      align-items: center;
      max-width: 840px;
      min-width: 360px;
      .el-icon-search {
        cursor: pointer;
      }
      .c-item + .c-item {
        margin-left: 15px;
      }
      .input {
        width: 240px;
      }
    }
  }

  .table-box {
    flex: 1;
    position: relative;

    .table-con {
      ::v-deep .headerStyle {
        background-color: #f0f4f9;

        .vxe-cell {
          color: #333333;
          font-size: 14px;

          span {
            font-weight: 600;
          }
        }
      }

      ::v-deep .rowClass {
        .vxe-cell {
          color: #666666;
          font-size: 14px;

          p,
          div,
          span {
            font-size: 14px;
          }
        }
      }
    }
  }

  .bg-pagination {
    margin-top: 10px;
  }
}
</style>
